<template>
  <div class="mainview">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">公众监督系统</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span>用户角色管理</span>
        </div>
      </template>

      <PersonRoleTable />
      <template #footer>Footer content</template>
    </el-card>
    <PersonRoleDialog />
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import PersonRoleTable from './PersonRoleTable.vue'
import PersonRoleDialog from './PersonRoleDialog.vue'
</script>

<style scoped lang="less">
.mainview {
  .el-card {
    margin-top: 20px;
    border-radius: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        color: #79bbff;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
